//头部栏，通用
//滚动鼠标，改变头部栏的宽高
$(window).scroll(function() {
	$("#logo,#logo img,#header").css({
		transition: "0.5"
	})
	if ($(this).scrollTop() > 0) {
		$("#logo,#logo img").css({
			height: "44px"
		});
		$("#header").css({
			height: "96px",
			borderBottom: "1px #e5e5e5 solid"
		})
	} else {
		$("#logo").css({
			height: "88px"
		});
		$("#logo img").css({
			height: "82px"
		});
		$("#header").css({
			height: "140px"
		})
		$("#header").css({
			height: "96px",
			borderBottom: "1px #ffffff solid"
		})
	}
})
//点击放大镜弹出搜索框
let a = 0;
$("#search").click(function(evt) {
	if (a == 0) {
		a++;
		let e = evt || event;
		$("#sou").css({
			display: "block"
		})
		e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
	} else if (a == 1) {
		a--;
		$("#sou").css({
			display: "none"
		})
	}
})
$(document).click(function() {
	a = 0;
	$("#sou").css({
		display: "none"
	});
})
$("#sou").click(function(evt) {
	let e = evt || event;
	$(this).css({
		display: "block"
	});
	e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
})



//轮播图
var count = 0;
//时间
var time = null;
//图片列表
var imglist = document.getElementById("img-div").getElementsByTagName("img");
//圆点列表
var cirlist = document.getElementById("cir-div").getElementsByTagName("div");
var oBtnL = document.querySelector("#left-btn");
var oBtnR = document.querySelector("#right-btn");
//展示对应的图片和点亮对应的圆点
function show(x) {
	for (var i = 0; i < imglist.length; i++) {
		if (x == i + 1) {
			//显示图片
			imglist[i].style.transition = "1s";
			imglist[i].style.display = "block";
			//圆点点亮
			cirlist[i].style.background = "rgba(0, 0, 0, .7)";
		} else {
			imglist[i].style.display = "none";
			cirlist[i].style.background = "rgba(0, 0, 0, .2)";
		}
	}
}

//定时轮播图片(每3秒切换一张图片)
function doStart() {
	if (time == null) {
		time = setInterval(function() {
			count++;
			show(count);
			if (count >= 4) {
				count = 0;
			}
		}, 3000);
	}
}
//停止轮播图片
function doStop() {
	if (time != null) {
		clearInterval(time);
		time = null;
	}
}

//鼠标移到圆点上图片会相应切换，并且之后会点亮下一个圆点 而不是未移到圆点前的下一个圆点
function doMove(x) {
	show(x);
	//将位置赋给count，图片就会从该图片的下一张开始切换
	count = x;
	//当鼠标移到最后一个圆点时，需要将count变为0,不然执行doStart()里的count++，count就会变为9，越界了
	if (count == 4) {
		count = 0;
	}
}

/*
    对于i 、count和show(x)里x的关系：
        i  = [0,7];
        x  = [1,8];
        count = [1,8];
*/
//点击左边按钮向左切换图片
function doLeftClick() {
	for (var i = 0; i < imglist.length; i++) {
		//判断当前在展示的是哪张图片
		if (imglist[i].style.display == "block") {
			if (i == 0) {
				show(4);
				// 忘掉这句后，break会直接退出，当左按钮按到最右的圆点，会直接忽略圆点1，直接跳到圆点2
				count = 0;
				//保证切换是3秒钟
				doStop();
				doStart();
				break;
			}
			show(i);
			count = i;
			//保证切换是3秒钟
			doStop();
			doStart();
			break;
		}
	}
}
//点击右边按钮向右切换图片
function doRightClick() {
	for (var i = 0; i < imglist.length; i++) {
		//判断当前在展示的是哪张图片
		if (imglist[i].style.display == "block") {
			if (i == 3) {
				show(1);
				count = 1;
				doStop();
				doStart();
				break;
			}
			show(i + 2);
			count = i + 2;
			//就不会出现切换到没有图片的情况
			if (count >= 4) {
				count = 0;
			}
			doStop();
			doStart();
			break;
		}
	}
}
doStart();
//默认打开页面显示的是第一张图片
//（不加，会出现第1个圆点亮也就是刚打开页面时，左按钮没反应）
doMove(1);

let imgDiv = document.getElementById("did");
let oBJ = document.getElementsByClassName("beijing1");
// let oBJ2 = document.getElementsByClassName("beijing2");
imgDiv.onmouseover = function() {
	oBtnL.style.left = "0px";
	oBtnR.style.right = "0px";
}
imgDiv.onmouseout = function() {
	oBtnL.style.left = "-25px";
	oBtnR.style.right = "-25px";
	oBtnR.style.transition = "0.5s";
	oBtnL.style.transition = "0.5s";
	// oBJ2.style.transition = "0.5s";
}





// 主页主体
$(".BJ").mouseover(function() {
	$(this).children("span").css({
		opacity: "1"
	});
})
$(".BJ").mouseout(function() {
	$(this).children("span").css({
		opacity: "0"
	});
})



//尾部通用栏
//尾部中间导航点击切换内容
$(function() {
	//获取点击时间的对象
	$("#footNav ul li").click(function() {
		//获取想要显示或者隐藏的对象
		var divShow = $("#footCenter").children(".nav1");
		//判断当前对象是否被选中，如果没选中的话进入if循环
		if(!$(this).hasClass('selected')){
			//获取当前对象的索引
			var index = $(this).index();
			//当前对象添加选中样式并且其同胞移除选中样式；
			$(this).addClass('selected').siblings('li').removeClass('selected');
			//索引对应的div块显示
			$(divShow[index]).show();
			//索引对应的div块的同胞隐藏
			$(divShow[index]).siblings('.nav1').hide();
		}
		
		$(this).css({
			fontWeight: "bold",
			color: "#FFFFFF",
			borderBottom: "2px solid #FFFFFF"
		})
		$(this).siblings().css({
			fontWeight: "normal",
			color: "#9c9c9c",
			borderBottom: "0"
		})
	})
})



